<template>
  <el-dialog
    v-model="dialogVisible"
    title="订单查询"
    width="40%"
    @close="closeDialog"
  >
    <el-form class="aceauForm" label-width="120px" :model="form">
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="U8订单号">
            <el-input v-model="form.moCode" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产订单号">
            <el-input v-model="form.scddh" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="存货编码">
            <el-input v-model="form.invcode" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="存货名称">
            <el-input v-model="form.invname" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="存货规格">
            <el-input v-model="form.invspec" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="订单日期" :span="12">
            <el-date-picker
              v-model="form.queryDate"
              :clearable="false"
              range-separator="-"
              style="width: 100%"
              type="daterange"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" style="margin-left: 20px">
          <el-form-item label="是否投产" :span="12">
            <el-switch
              v-model="form.isTc"
              active-text="是"
              :active-value="true"
              inactive-text="否"
              :inactive-value="false"
              inline-prompt
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="query">查询</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import dayjs from 'dayjs'
  const dialogVisible = ref(false)
  const form = reactive({})

  const formatDate = (timer) => {
    return dayjs(timer).format('YYYY-MM-DD')
  }

  const setDefault = () => {
    const start = dayjs(new Date()).startOf('month')
    const end = new Date()
    const sstart = formatDate(start)
    const send = formatDate(end)
    form.queryDate = [sstart, send]
    form.isTc = false
    form.isTcSign = 'sign'
  }

  const openDialog = () => {
    if (undefined === form.queryDate) {
      setDefault()
    }
    dialogVisible.value = true
  }

  const query = () => {
    _emits('query-callback', form)
    dialogVisible.value = false
  }

  const closeDialog = () => (dialogVisible.value = false)

  defineExpose({ openDialog })
  const _emits = defineEmits(['query-callback'])
</script>
